<template>
  <div>App</div>
  <p>count:{{ count }}</p>
  <button @click="addCount">addCount</button>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App',
  })
</script>
<script setup lang="ts">
import {ref} from "vue"
    /* 
      使用ref方法来创建响应式数据
       - 接受一个内部值，返回一个响应式的，可更改的ref对象
       - 此对象只有一个指向其内部值的属性 .value
       - 它也是响应式的，即所有对 .value 的操作都将被追踪
    */
   const count = ref(1)
   console.log(count)
   const addCount = ()=>{
     count.value++
   }
</script>
<style lang="less" scoped>
  
</style>